/*
* @Author: zhangyujie
* @Date:   2015-08-12 10:44:27
* @Last Modified by:   zhangyujie
* @Last Modified time: 2015-08-14 13:53:11
*/


define(['jquery', 'd3', 'util'], function($, d3, util) {
	function singleRing(series) {
		var setting   = {
            selector: '#three_1',
            title:{
                text:'资产组合',
                subtext:'示意图',
                textStyle:{
                    'font-size':'20px',
                    'fill':'#8C91A0',
                    'font-weight':'bold',
                    'text-anchor':'middle',
                    'font-famliy':'微软雅黑'
                },
                subtextStyle:{
                    'font-size':'20px',
                    'fill':'#8C91A0',
                    'font-weight':'bold',
                    'text-anchor':'middle',
                    'font-famliy':'微软雅黑'
                }

            },
            //series:series,/*[
            //    {'郁金香25号基金':300},
            //    {'郁金香23号基金':200},
            //    {'郁金香31号基金':100},
            //    {'郁金香43号基金':50},
            //    {'郁金香52号基金':100},
            //    {'郁金香21号基金':50},
            //    {'郁金香37号基金':20}
            //],*/

			series:series,
            innerPie:{
                innerRadius:'40.1%',
                outerRadius:'45%',
                color:'#fff'
            },
            middlePie:{
                innerRadius:'40%',
                outerRadius:'80%',
                colorset: ['#24D2FD','#60AFF9','#1989BB','#2CB551','#E6E747','#F6B86D','#FD8C84']
            },
            outerPie:{
                innerRadius:'60%',
                outerRadius:'85%',
                color:'#EAEAEA'
            },
            margin:{
                top:10,
                right:10,
                bottom:10,
                left:10
            }
        }
	

	
	three_1(setting)

	function three_1(setting) {

		var selector = setting.selector,
			series = setting.series,
			title = setting.title,
			text = title.text,
			subtext = title.subtext,
			textStyle = title.textStyle,
			subtextStyle = title.subtextStyle,
			colorset = setting.middlePie.colorset,
			margin = setting.margin,
			InnerPie = setting.innerPie,
			MiddlePie = setting.middlePie,
			OuterPie = setting.outerPie,
			width = document.querySelector(selector).offsetWidth,
			height = document.querySelector(selector).offsetHeight

		var svg,
			content,
			radius = Math.min(width, height) / 2,
			innerPieInner = util.util.getNumByRate(radius,InnerPie.innerRadius),
			innerPieOuter = util.util.getNumByRate(radius,InnerPie.outerRadius),
			middlePieInner = util.util.getNumByRate(radius,MiddlePie.innerRadius),
			middlePieOuter = util.util.getNumByRate(radius,MiddlePie.outerRadius),
			outerPieInner = util.util.getNumByRate(radius,OuterPie.innerRadius),
			outerPieOuter = util.util.getNumByRate(radius,OuterPie.outerRadius),
			outerRadius1 = 100,
			innerRadius1 = 80,
			outerRadius2 = 90,
			innerRadius2 = 60,
			innerArc,
			outerArc,
			innerPie,
			outerPie,
			arc,
			pie,
			circle,
			circleRadial,
			textRect = util.util.getTextSize(text,textStyle),
			subtextRect = util.util.getTextSize(text,subtextStyle)

		function tweenPie(b,callback) {

            b.innerRadius = 0;

            var i = d3.interpolate({startAngle: Math.PI * 2, endAngle: Math.PI * 2}, b);

            return function(t) {
            	return callback && callback(i(t));
            	 };

        }

		svg = d3.select(selector).append('svg')
					.attr('width', width)
					.attr('height', height)
					.attr('transform','translate(' + margin.left + ',' + margin.top + ')')
		content = svg.append('g')
				.attr('class','content')
				.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

		arc = d3.svg.arc()
			.outerRadius(innerPieOuter)
			.innerRadius(innerPieInner)

		innerArc = d3.svg.arc()
			    .outerRadius(middlePieOuter)
			    .innerRadius(middlePieInner);

		outerArc = d3.svg.arc()
				.innerRadius(outerPieOuter)
				.outerRadius(outerPieInner);

		pie = d3.layout.pie()
			.sort(null)
			.value(function(d){
				return d
			})
		innerPie = d3.layout.pie()
			   .sort(null)
			   .value(function(d){
				   	for(var key in d){
				   		return d[key]
				   	}
			   })

		outerPie = d3.layout.pie()
			   .sort(null)
			   .value(function(d){
				   	return d
			   })



		var outerPath = content.selectAll('.outerPath')
						.data(outerPie([1000]))
						.enter()
						.append('path')
						.attr('class','outerPath')
						.attr('fill',OuterPie.color)
						.transition()
						.duration(1000)
						.attrTween('d', function(d){
							return tweenPie(d,outerArc)
						}) //transition.attrTween在不同attr属性值之间平滑过渡
						.transition()
						.ease('elastic')

		var innerPath = content.selectAll('.innerPath')
						.data(innerPie(series))
						.enter()
						.append('path')
						.attr('class','innerPath')
						.attr('fill',function(d,i){
							return colorset[i]
						})
						.transition()
						.duration(1000)
						.attrTween('d', function(d){
							return tweenPie(d,innerArc)
						}) //transition.attrTween在不同attr属性值之间平滑过渡
						.transition()
						.ease('elastic')

		var paths = content.selectAll('.pahts')
					.data(pie([1000]))
					.enter()
					.append('path')
					.attr('class','innerPath')
					.attr('fill',InnerPie.color)
					.transition()
					.duration(1000)
					.attrTween('d', function(d){
							return tweenPie(d,arc)
					}) //transition.attrTween在不同attr属性值之间平滑过渡
					.transition()
					.ease('elastic')

		circleRadial = content.append('defs')
					.append('radialGradient')
					.attr('id','circleRadial')
					.attr('r','50%')
					.attr('cx','50%')
					.attr('cy','50%')

		circleRadial.append('stop')
				.attr('offset', '88%')
				.style({'stop-color':'#fff','stop-opacity': 0})

		circleRadial.append('stop')
				.attr('offset', '100%')
				.style({'stop-color':'#EAEAEA','stop-opacity': 1})

		circle = content.append('circle')
				.attr('r',radius * 0.4)
				.attr('cx','0')
				.attr('cy','0')
				.attr('fill','url(#circleRadial)')

		var pieText = content.append('text')
					.text(text)
					.attr('x',0)
					.attr('y',-(textRect.height * 1/2))
					.attr('dy', '0.35em')
					.style(textStyle)
		var pieSubtext = content.append('text')
					.text(subtext)
					.attr('x',0)
					.attr('y',subtextRect.height)
					.style(textStyle)


	}
	}
	
	return {
        singleRing : singleRing
    }

})

